<template>
  <div class="firstclick-container">
    <Resize>
      <template v-slot:left>
        <div class="content_l">
          <vxe-table
            highlight-current-row
            highlight-hover-row
            :show-header="false"
            show-overflow
            ref="xTree"
            border="inner"
            :data="siteList"
            :tree-config="{
              children: 'children',
              transform: false,
              parentKey: 'parentId',
              line: true,
              iconOpen: 'el-icon-remove',
              iconClose: 'el-icon-circle-plus',
            }"
            class="left-table"
            @cell-click="clickListRow"
          >
            <vxe-column tree-node show-overflow>
              <template #default="{ row }">
                <span>
                  <span v-if="row.siteId == currentRowId" class="activeRow">
                    <svg-icon icon-class="right" style="color: #009a94" />
                  </span>
                  <!-- 电脑 -->
                  <img
                    src="../../../assets/icons/png/Display Check.png"
                    alt=""
                    style="vertical-align: text-bottom"
                    v-if="row.root == '000'"
                  />
                  <!-- 地球 -->
                  <img
                    src="../../../assets/icons/png/globe.gif"
                    alt=""
                    style="vertical-align: bottom"
                    v-if="!row.channelId && row.root != '000'"
                  />

                  <!--
              <i class="tree-node-icon fa" :class="$refs.xTree.isTreeExpandByRow(row) ? 'el-icon-folder-opened' : 'el-icon-folder'"></i> -->
                  <span style="cursor: pointer; fontsize: 12px; color: #000">
                    {{ row.name }}</span
                  >
                </span>
              </template>
            </vxe-column>
          </vxe-table>
        </div>
      </template>
      <template v-slot:right>
        <div class="content_r">
          <div v-if="siteRow">
            <div class="content-wrap my-search">
              <el-form
                :model="queryParams"
                size="mini"
                ref="queryForm"
                :inline="true"
                label-width="68px"
              >
                <el-form-item label="IP地址" prop="ip">
                  <el-input
                    v-model="queryParams.ip"
                    placeholder="请输入IP地址"
                    clearable
                    size="small"
                    style="width: 240px"
                    @keyup.enter.native="handleQuery"
                  />
                </el-form-item>

                <el-form-item label="登录时间">
                  <el-date-picker
                    v-model="dateRange"
                    size="small"
                    style="width: 240px"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    type="datetimerange"
                    range-separator="-"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    :default-time="['12:00:00']"
                  ></el-date-picker>
                </el-form-item>
                <el-form-item>
                  <el-button
                    type="primary"
                    icon="el-icon-search"
                    size="mini"
                    @click="handleQuery"
                    >搜索</el-button
                  >
                  <el-button
                    icon="el-icon-refresh"
                    size="mini"
                    @click="resetQuery"
                    >重置</el-button
                  >
                </el-form-item>
              </el-form>
            </div>
            <el-table :data="firstClicklist" v-loading="loading">
              <span slot="empty" v-if="!siteRow">请先选择左侧站点</span>
              <el-table-column
                prop="id"
                label="id"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="time"
                label="登录时间"
                width="200"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="ip"
                label="IP地址"
                align="center"
              ></el-table-column>
            </el-table>
            <pagination
              v-show="total > 0"
              :total="total"
              :page.sync="queryParams.pageNum"
              :limit.sync="queryParams.pageSize"
              @pagination="getList"
            />
          </div>
        </div>
      </template>
    </Resize>
  </div>
</template>

<script>
import { listSite } from "@/api/content/net";
import { getFirsClicktList } from "@/api/extendApplication/firstclick";
export default {
  data() {
    return {
      //当前站点
      siteRow: null,
      // 遮罩层
      loading: true,
      siteList: [],
      //右侧表格
      firstClicklist: [],
      dateRange: [],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      total: 0,
    };
  },

  components: {},

  computed: {
    currentRowId() {
      return this.siteRow?.siteId;
    },
  },

  mounted() {
    this.getSiteList();
  },

  methods: {
    //获取站点列表
    getSiteList() {
      listSite()
        .then((res) => {
          this.siteList = [
            { name: "WYCMS主站", root: "000", children: res.data },
          ];
        })
        .then(() => {
          //展开第一个节点
          this.$nextTick(() => {
            this.$refs.xTree.setTreeExpand(this.siteList[0], true);
          });
        });
    },

    //点击站点
    clickListRow({ row }) {
      if (row.root == "000") return;
      this.siteRow = row;

      this.queryParams.siteId = this.siteRow.siteId;
      this.queryParams.pageNum = 1;
      this.getList();
    },
    getList() {
      this.loading = true;

      getFirsClicktList(
        this.addDateRange(this.queryParams, this.dateRange)
      ).then((res) => {
        this.firstClicklist = res.data.list;
        this.total = res.data.totalCount;
        this.loading = false;
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams = {
        pageNum: 1,
        siteId: this.siteRow.siteId,
      };
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = [];
      this.resetForm("queryForm");
      this.handleQuery();
    },
  },
};
</script>

<style scoped lang="scss">
@import "~@/assets/styles/variables.scss";
.firstclick-container {
  width: 100%;
  // height: calc(100vh - 100px);
  // height: calc(100vh - #{$footHeight} - 0px - 50px - 20px);
  display: flex;
  flex-direction: row;
  // padding: 0px 10px 10px 0;
  border: 1px solid #ccc;
  position: relative;
  .content_l {
    overflow: auto;
    // min-width: 240px;
    width: 100%;
    height: 100%;
    background: #f4f4f4 !important;
    display: flex;
    flex-direction: column;
    .left-table {
      flex: 1;
      height: 0;
      overflow: overlay;
      overflow: auto;
    }
  }
  .content_r {
    overflow: overlay;
    overflow: auto;
    // padding: 10px;
    border-left: 1px solid #ccc;
    width: 100%;
    height: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
  }
}
</style>
